<template>
  <div v-loading="fullscreenLoading">
    <div class="header">
      <span>手机号</span>
      <el-input
        class="mobile"
        v-model="mobile"
        clearable
        @clear="getData"
      ></el-input>
      <el-button type="primary" size="medium" @click="search">查询</el-button>
    </div>
    <table class="table" border="0" cellpadding="0" cellspacing="0">
      <thead>
        <th>id</th>
        <th>微信昵称</th>
        <th>电话</th>
        <th>注册时间</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td width="300">
            <span>{{ item.nickname }}</span>
          </td>
          <td width="300">
            <span>{{ item.mobile || "暂无" }}</span>
          </td>
          <td>
            <span>{{ item.addTime }}</span>
          </td>
          <td width="400">
            <button @click="checkout(item)">查看受邀</button>
            <button @click="YHQ(item)">优惠券</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="page.num"
        :page-size="page.size"
        layout="total, prev, pager, next"
        :total="page.total"
      ></el-pagination>
    </div>
    <p class="noData" v-if="!list.length">暂无数据</p>
    <!-- 优惠券 -->
    <el-dialog title="提示" :visible.sync="dialogYhq" width="50%" center>
      <el-select v-model="value" placeholder="请选择" style="margin-right:10px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-date-picker
        v-model="time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sendYhq">确 定</el-button>
      </span>
    </el-dialog>
    <!-- dialog -->
    <el-dialog title="受邀人列表" :visible.sync="dialogVisible" width="750px">
      <div class="dialog-inner">
        <el-alert
          :title="'邀请人手机号：' + (user.mobile || '暂无')"
          type="info"
          :closable="false"
        ></el-alert>
        <div class="filter">
          <el-date-picker
            v-model="dateTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          ></el-date-picker>
          <el-button
            type="primary"
            size="small"
            @click="searchInner"
            style="margin-left: 10px;"
            >查询</el-button
          >
        </div>
        <table
          class="table dialog-table"
          border="0"
          cellpadding="0"
          cellspacing="0"
        >
          <thead>
            <th>id</th>
            <th>微信昵称</th>
            <th>电话</th>
            <th>注册时间</th>
          </thead>
          <tbody>
            <tr v-for="item in shareList" :key="item.id">
              <td>{{ item.id }}</td>
              <td>
                <span>{{ item.nickname }}</span>
              </td>
              <td>
                <span>{{ item.mobile || "暂无" }}</span>
              </td>
              <td>
                <span>{{ item.addTime }}</span>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="pagination" v-if="shareList.length">
          <el-pagination
            @current-change="handleShareCurrentChange"
            :current-page="sharePage.num"
            :page-size="sharePage.size"
            layout="total, prev, pager, next"
            :total="sharePage.total"
          ></el-pagination>
        </div>
        <p class="noData" v-else>暂无数据</p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as request from "@/api/user";
import dayjs from "dayjs";
export default {
  data() {
    return {
      time: "",
      mobile: "",
      value: "",
      options: [],
      userId: "",
      page: {
        size: 10,
        num: 1,
        total: 0
      },
      list: [],
      fullscreenLoading: false,
      dialogVisible: false,
      dialogYhq: false,
      sharePage: {
        size: 10,
        num: 1,
        total: 0
      },
      shareList: [],
      user: {
        id: 0,
        mobile: ""
      },
      isSearch: false,
      dateTime: ""
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleCurrentChange(val) {
      this.page.num = val;
      this.getData();
    },
    handleShareCurrentChange(val) {
      this.sharePage.num = val;
      this.getShareList();
    },
    /* 获取列表数据 */
    async getData() {
      this.fullscreenLoading = true;
      let query = {
        num: this.page.num,
        size: this.page.size
      };
      try {
        const { errno, data, errmsg } = await request.userList(query);
        if (errno === 0) {
          this.list = data.list || [];
          this.page.num = data.pageNum;
          this.page.total = data.total;
        } else {
          this.$message.warning(errmsg);
        }
      } catch (err) {
        console.error(err);
      }
      this.fullscreenLoading = false;
    },
    async search() {
      if (!this.mobile) {
        return this.$message.warning("请输入手机号");
      }
      this.fullscreenLoading = true;
      let query = {
        phone: this.mobile
      };
      try {
        const { errno, data, errmsg } = await request.userList(query);
        if (errno === 0) {
          this.list = data || [];
          this.page.num = 1;
          this.page.total = 1;
        } else {
          this.$message.warning(errmsg);
        }
      } catch (err) {
        console.error(err);
      }
      this.fullscreenLoading = false;
    },
    // 优惠券
    async YHQ(item) {
      this.dialogYhq = true;
      this.userId = item.id;
      console.log(item.id);
      try {
        const { errno, data, errmsg } = await request.selectBycode();
        if (errno === 0) {
          this.options = data;
        }
      } catch (err) {
        console.error(err);
      }
    },
    async sendYhq() {
      console.log(this.time);
      let params = {
        begintime: dayjs(this.time[0]).format("YYYY-MM-DD"),
        endtime: dayjs(this.time[1]).format("YYYY-MM-DD"),
        userID: this.userId,
        CouponId: this.value
      };
      try {
        const { errno, data, errmsg } = await request.change(params);
        if (errno === 0) {
          this.dialogYhq = false;
          this.$message.success(errmsg);
        } else {
          this.$message.warning(errmsg);
        }
      } catch (err) {
        this.dialogYhq = false;
        console.error(err);
      }
    },
    checkout(user) {
      this.user.id = user.id;
      this.user.mobile = user.mobile || "";
      this.shareList = [];
      this.sharePage.num = 1;
      this.sharePage.total = 0;
      this.dialogVisible = true;
      this.getShareList();
    },
    async getShareList() {
      let query = {
        num: this.sharePage.num,
        size: this.sharePage.size,
        userId: this.user.id
      };
      if (this.isSearch && this.dateTime) {
        query.mintime = dayjs(this.dateTime[0]).format("YYYY-MM-DD HH:mm:ss");
        query.maxtime = dayjs(this.dateTime[1]).format("YYYY-MM-DD HH:mm:ss");
      }
      this.isSearch = false;
      try {
        const { errno, data, errmsg } = await request.userShareList(query);
        if (errno === 0) {
          this.shareList = data.list || [];
          this.sharePage.num = data.pageNum;
          this.sharePage.total = data.total;
        } else {
          this.$message.warning(errmsg);
        }
      } catch (err) {
        console.error(err);
      }
    },
    searchInner() {
      this.isSearch = true;
      this.shareList = [];
      this.sharePage.num = 1;
      this.sharePage.total = 0;
      this.getShareList();
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  padding: 30px 0 10px 20px;
  .mobile {
    width: 220px;
    margin: 0 10px;
  }
}
.table {
  width: 100%;
  th {
    height: 100px;
    font-weight: normal;
    border-bottom: 1px solid #ccc;
    font-size: 18px;
  }
  td {
    height: 80px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
  }
  button {
    margin: 0 10px;
    width: 110px;
    height: 32px;
    background-color: #3699ff;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    border-radius: 2px;
  }
}
.dialog-table {
  th {
    height: 50px;
    font-size: 14px;
  }
  td {
    height: 60px;
    font-size: 14px;
  }
}
.noData {
  margin-top: 40px;
  text-align: center;
  color: #888;
}
.dialog-inner {
  margin-top: -20px;
  padding: 0 10px;
}
.pagination {
  margin: 25px 0;
  text-align: center;
}
.filter {
  margin: 15px 0;
}
</style>
